<template>
  <div class="wrapper">
    <p class="title">用户注册</p>
    <div class="tip">{{message}}</div>
    <el-form ref="formRef" :model="user" label-width="120px">
      <el-form-item label="登录名称">
        <el-input v-model="user.username"></el-input>
      </el-form-item>
      <el-form-item label="登录密码">
        <el-input v-model="user.password"></el-input>
      </el-form-item>
      <el-form-item label="确认密码">
        <el-input v-model="user.confirm"></el-input>
      </el-form-item>
      <el-form-item label="昵称">
        <el-input v-model="user.nickname"></el-input>
      </el-form-item>
    </el-form>
    <el-row justify="end">
      <el-col :span="4">
        <el-button type="primary" @click="register">注册</el-button>
      </el-col>
    </el-row>
  </div>
</template>

<script setup>
// 导入需要使用的函数
import { reactive , getCurrentInstance , ref } from 'vue' ;
// 获得与当前组件对应的对象
const { proxy } = getCurrentInstance();
// 生成一个响应式对象(在表单中可以直接使用)
const user = reactive( { username:'' , password: '' , confirm: '' , nickname: '' } );
// 用来记录提示信息的变量
const message = ref( '' );

let validate = () => {
    if( !user.username ) {
        message.value = '登录名称不可以为空' ;
        return false ;
    }
    if( !user.password ) {
        message.value = '登录密码不可以为空' ;
        return false ;
    }
    if( user.password != user.confirm ){
        message.value = '两次密码不一致' ;
        return false ;
    }
    // 若前三项都未命中则直接返回true
    return true ;
}

// 定义用来实现注册操作的函数
const register =  () => {
    if( validate() ) {
        // 获得 axios 对象
        let axios = proxy.$http ;
        // 发送异步请求
        axios.post( '/customer/sign/up' , user )
            .then( resp =>{
                // 采用ES6提供的支持将对象结构(并为 message 指定别名)
                let { success , message: msg } = resp.data ;
                // 若注册失败
                if( !success ){
                    message.value = msg ;
                    return ;
                }
                // 注册成功后就采用编程式导航进入到登录页面
                proxy.$router.push( { name: 'login' } );
            }).catch( error =>{
                message.value = error.message ;
            });
    }
}
</script>

<style scoped>
.wrapper {
    background: #fff;
}
.wrapper>.title {
    text-align: center ;
}
.wrapper>.tip {
    text-align: center;
    color: red ;
}
</style>